<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head><title>Matrix Table Test</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="expires" content="" />
<meta name="lang" content="en-US" />
<meta name="template-info" content="NewTopicFile.htm 2010-03-04" />
<meta name="creation-date" scheme="iso8601" content="2014-04-28" />
<meta name="last-modified" scheme="iso8601" content="2014-04-28" />
<meta name="version" content="1" />
<meta name="author" content="Ulrich Sprick" />
<meta name="robots" content="follow" />
<meta name="category" content="Programming/HTML/Transformation" />
<meta name="keywords" content="HTML, programming, table, transformation, vertical text, filter." />
<meta name="description" content="" />

<link rel="stylesheet" type="text/css" href="../../../includes/topic-2.css" />
<link rel="stylesheet" type="text/css" href="../../../includes/table-2.css" />
<link rel="stylesheet" type="text/css" href="../includes/local.css" />

<style>
table div.rotate {
	display: inline-block;
	overflow: hidden;
	width: 1.5em;
}
table div.rotate div  {
	filter:  progid:DXImageTransform.Microsoft.BasicImage(Rotation=3);
	display: inline-block;
	white-space: nowrap;
	line-height: 1.5;
	text-align: left;
	width: 15em;
}
table  div.rotate div:after {
	content: "";
	display: block;
	margin: -1.5em 0 100%;
}

table  div.dummy {
	content: "";
	display: block;
	margin: -1.5em 0 100%;
}

table {
	margin-top: 2em;
}

thead th,td {
	border: 1px solid;
	vertical-align: bottom;
	font-weight: normal;
	padding: 0.5em;
}

tbody th {
	font-weight: normal;
	border: 1px solid;
	padding-left: 1em;
	padding-right: 1em;
	text-align: left;
}
tbody td {
	text-align: center;
}
</style>

<script language="JavaScript" type="text/javascript" src="../../../includes/global.js"></script>
<script language="JavaScript" type="text/javascript" src="../../../includes/cookies.js"></script>
<script language="JavaScript" type="text/javascript" src="../../../includes/topic.js"></script>
<script language="JavaScript" type="text/javascript" src="../includes/local.js"></script>

</head><body class="content" onload="onloadTopic()"><a name="top"></a>

<h1></h1>
<table ID="Table1">
<thead>
<tr>
	<th><div class="rotate"><div>First th</div><div class="dummy"> </div></div></th>
	<td><div class="rotate"><div>Some cell with a loooong header</div><div class="dummy"> </div></div></td>
	<td><div class="rotate"><div>And another</div><div class="dummy"> </div></div></td>
</tr></thead><tbody>
<tr>
	<th>some element</th>
	<td>x</td>
	<td>x</td>
</tr>
<tr>
	<th>anoter entry</th>
	<td>x</td>
	<td>x</td>
</tr>
</tbody></table>

</body>

<p><a href="http://itpastorn.blogspot.se/2009/05/rotating-column-headers-using-css-only.html">Rotating column headers using CSS only</a> Itpastorn</p>
<p><a href="http://kizu.ru/en/fun/rotated-text/">Roman Kumarov: Rotated Text</a></p>
<p><a href="http://dabblet.com/gist/4072362">http://dabblet.com/gist/4072362</a></p>
<p><a href="http://extremelysatisfactorytotalitarianism.com/blog/?p=1002">http://extremelysatisfactorytotalitarianism.com/blog/?p=1002</a></p>

<script language="javascript">
</script>

</html>
